<template>
	<view class="container">
		<!--    -->
		<cropper v-if="load" ref="cropper" :initialBoxWidthRatio="initialBoxWidthRatio" :aspectRatio="aspectRatio" :minBoxWidthRatio="minBoxWidthRatio" :minBoxHeightRatio="minBoxHeightRatio" :imagePath="imagePath" @cancel="cropCancel" @complete="cropComplete" @reset="cropReset"></cropper>
	</view>
</template>

<script>
import cropper from '../components/cropper/cropper.vue';
export default {
	components: { cropper },

	data() {
		return {
			imageTargetType: null,
			imagePath: '',
			fromToken: '',
			aspectRatio: '',
			minBoxWidthRatio: '',
			minBoxHeightRatio: '',
			initialBoxWidthRatio: '',
			load: false
		};
	},
	onLoad(options) {
		this.imageTargetType = options.imageTargetType || null;
		if (options.imagePath && options.viewToken) {
			this.imagePath = options.imagePath;
			this.fromToken = options.viewToken;
			this.aspectRatio = options.aspectRatio ? Number(options.aspectRatio) : null;
			this.minBoxWidthRatio = options.minBoxWidthRatio ? Number(options.minBoxWidthRatio) : null;
			this.minBoxHeightRatio = options.minBoxHeightRatio ? Number(options.minBoxHeightRatio) : null;
			this.initialBoxWidthRatio = options.initialBoxWidthRatio ? Number(options.initialBoxWidthRatio) : 1;
			this.load = true;
		} else {
			this.navigateBack();
		}
	},
	onReady() {
		setTimeout(() => {
			this.$refs.cropper.init(this.imagePath);
		}, 50);
	},
	methods: {
		cropCancel(res) {
			uni.$emit('croperCancel', { fromToken: this.fromToken, imageTargetType: this.imageTargetType });
			this.navigateBack();
		},
		cropComplete(res) {
			uni.showLoading({
				mask: true,
				title: '处理中...'
			});
			uni.$emit('croperComplete', { fromToken: this.fromToken, imageTargetType: this.imageTargetType, res });
			this.navigateBack({
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		cropReset(res) {
			uni.$emit('croperReset', { fromToken: this.fromToken, imageTargetType: this.imageTargetType });
		}
	}
};
</script>

<style></style>
